<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { OAuthControllerService } from "../../../../generated";

interface ThirdPartyAccount {
  name: string;
  icon: string;
  connected: boolean;
  type: 'github' | 'gitee';
}

const accounts = ref<ThirdPartyAccount[]>([
  { name: 'GitHub', icon: 'github', connected: false, type: 'github' },
  { name: 'Gitee', icon: 'gitee', connected: false, type: 'gitee' }
]);

// 获取绑定状态
const getBindStatus = async () => {
  try {
    const [githubRes, giteeRes] = await Promise.all([
      OAuthControllerService.getGithubBindStatusUsingGet(),
      OAuthControllerService.getGiteeBindStatusUsingGet()
    ]);
    
    if (githubRes.code === 0) {
      accounts.value[0].connected = githubRes.data || false;
    }
    if (giteeRes.code === 0) {
      accounts.value[1].connected = giteeRes.data || false;
    }
  } catch (error) {
    console.error('获取绑定状态失败', error);
  }
};

// 处理连接/解绑
const handleAccount = async (account: ThirdPartyAccount) => {
  if (account.type === 'github' || account.type === 'gitee') {
    if (account.connected) {
      await handleUnbind(account);
    } else {
      await handleBind(account);
    }
  }
};

// 处理绑定
const handleBind = async (account: ThirdPartyAccount) => {
  try {
    let res;
    if (account.type === 'github') {
      res = await OAuthControllerService.getGithubAuthUrlUsingGet('bind');
    } else if (account.type === 'gitee') {
      res = await OAuthControllerService.getGiteeAuthUrlUsingGet('bind');
    }
    
    if (res?.code === 0) {
      window.location.href = res.data as string;
    }
  } catch (error) {
    ElMessage.error(`获取${account.name}授权URL失败`);
  }
};

// 处理解绑
const handleUnbind = async (account: ThirdPartyAccount) => {
  if (!confirm(`确定要解除${account.name}账号绑定吗？`)) {
    return;
  }
  
  try {
    let res;
    if (account.type === 'github') {
      res = await OAuthControllerService.unbindGithubUsingPost();
    } else if (account.type === 'gitee') {
      res = await OAuthControllerService.unbindGiteeUsingPost();
    }
    
    if (res?.code === 0) {
      ElMessage.success('解绑成功');
      account.connected = false;
    }
  } catch (error) {
    ElMessage.error('解绑失败');
  }
};

onMounted(getBindStatus);

defineExpose({
  updateBindStatus: getBindStatus
});
</script>

<template>
  <div class="third-party-accounts">
    <div v-for="account in accounts" :key="account.name" class="account-item">
      <span class="account-name">
        <el-icon>
          <component :is="account.icon"/>
        </el-icon>
        {{ account.name }}
      </span>
      <div class="account-status">
        <el-tag v-if="account.connected" type="success" size="small" class="status-tag">
          已绑定
        </el-tag>
        <el-button
            :type="account.connected ? 'danger' : 'primary'"
            size="small"
            @click="handleAccount(account)"
        >
          {{ account.connected ? '解除绑定' : '绑定账号' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.account-item:last-child {
  border-bottom: none;
}

.account-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.account-name .el-icon {
  font-size: 20px;
}

.account-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-tag {
  font-size: 12px;
}
</style> 